<template>
	<s-layout title="账号密码" navbar="normal" >
		<!-- <assNavbar title="标题" /> -->
		<view class="content">
			<view class="cardBox">
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap="onChangeMobile">
					<view class="cardBox-item-title">手机号</view>
					<view class="cardBox-item-right">
						{{userInfo.mobile}}
						<image class="cardBox-item-icon" src="/icon/hs_right.png" />
					</view>
				</view>
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap="onSetPassword">
					<view class="cardBox-item-title">登录密码</view>
					<view class="cardBox-item-right">
						{{userInfo.verification?.password ? '修改登录密码' : '点击设置登录密码'}}
						<image class="cardBox-item-icon" src="/icon/hs_right.png" />
					</view>
				</view>
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap="onSetPayPassword">
					<view class="cardBox-item-title">支付密码</view>
					<view class="cardBox-item-right">
						{{userInfo.verification?.password ? '修改支付密码' : '点击设置支付密码'}}
						<image class="cardBox-item-icon" src="/icon/hs_right.png" />
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {ref, reactive, computed ,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import { showAuthModal } from '@/sheep/hooks/useModal';
	
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const state = reactive({
		data:{},
		list:[],
	})
	onLoad((opt)=>{

	})
	// 修改手机号
	function onChangeMobile() {
	  showAuthModal('changeMobile');
	};
	// 修改/设置密码
	function onSetPassword() {
	  if (userInfo.value.verification.password) {
	    showAuthModal('changePassword');
	  } else {
	    showAuthModal('resetPassword');
	  }
	}
	//// 修改/设置支付密码
	function onSetPayPassword(){
		showAuthModal('resetPayPassword');
	}
	function onClick(){
		sheep.$router.go('/pages/index/index')
	}
	
</script>

<style lang="scss" scoped>
	.content{
		.titleLine{
			margin: 30rpx 34rpx;
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 1;
			color: #565656;
		}
		.cardBox{
			width: 690rpx;
			margin: 30rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			.cardBox-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx 0 20rpx;
				height: 85rpx;
				border-bottom: 2rpx solid #F5F5F5;
				&:last-child{
					border-bottom: none;
				}
				.cardBox-item-title{
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-weight: 500;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
					color: #1F1F1F;
				}
				.cardBox-item-right{
					display: flex;
					align-items: center;
					.cardBox-item-text{
						font-family: Source Han Sans;
						font-size: 30rpx;
						font-weight: 500;
						line-height: normal;
						text-align: right;
						letter-spacing: normal;
						color: #484848;
					}
					.cardBox-item-tips{
						font-family: Source Han Sans;
						font-size: 28rpx;
						font-weight: normal;
						line-height: normal;
						letter-spacing: normal;
						color: #9E9E9E;
					}
					.cardBox-item-img{
						width: 67rpx;
						height: 67rpx;
						border-radius: 50%;
					}
					.cardBox-item-icon{
						width: 9rpx;
						height: 25rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>